<template>
  <div>
    <div class="avatar">
      <a-button v-if="userData == null" type="primary" @click="goToLogin"
        >去登录
      </a-button>

      <a-avatar @click="goGetUser" style="background-color: #87d068">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
    </div>
  </div>

  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo">山楂树种植检测平台</div>
      <a-menu
        theme="dark"
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
        @click="handleClick"
      >
        <a-menu-item key="/home">
          <pie-chart-outlined />
          <span>首页</span>
        </a-menu-item>
        <a-sub-menu key="institution" @titleClick="titleClick">
          <template #title>
            <span>
              <user-outlined />
              <span>组织机构</span>
            </span>
          </template>
          <a-menu-item key="/institution/institution">机构管理</a-menu-item>
          <a-menu-item key="/institution/role">角色管理</a-menu-item>
          <a-menu-item key="/institution/user">用户管理</a-menu-item>
          <a-menu-item key="/institution/job">岗位管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="system" @titleClick="titleClick">
          <template #title>
            <span>
              <user-outlined />
              <span>系统管理</span>
            </span>
          </template>
          <a-menu-item key="/system/menu">菜单管理</a-menu-item>
          <a-menu-item key="/system/area">区域管理</a-menu-item>
          <a-menu-item key="/system/system">系统配置</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="one" @titleClick="titleClick">
          <template #title>
            <span>
              <user-outlined />
              <span>一张图</span>
            </span>
          </template>
          <a-menu-item key="/one/station">基地风采</a-menu-item>
          <a-menu-item key="/one/distribute">产区分布</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="production" @titleClick="titleClick">
          <template #title>
            <span>
              <user-outlined />
              <span>生产情况</span>
            </span>
          </template>
          <a-menu-item key="/production/production1">种植规模</a-menu-item>
          <a-menu-item key="/production/production2">预估产量产值</a-menu-item>
          <a-menu-item key="/production/production3">上市周期</a-menu-item>
          <a-menu-item key="/production/recorder">录像机</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sell" @titleClick="titleClick">
          <template #title>
            <span>
              <user-outlined />
              <span>营销情况</span>
            </span>
          </template>
          <a-menu-item key="/sell/market1">销售记录</a-menu-item>
          <a-menu-item key="/sell/market2">目标客户</a-menu-item>
          <a-menu-item key="/sell/trend">市场行情</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="monitor" @titleClick="titleClick">
          <template #title>
            <span>
              <user-outlined />
              <span>监控情况</span>
            </span>
          </template>
          <a-menu-item key="/monitor/monitor">用标主体</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" />
      <!--正文-->
      <a-layout-content style="margin: 0 16px">
        <!--路径-->
        <a-breadcrumb style="margin: 16px 0">
          <!--          <a-breadcrumb-item>{{ pathData }}</a-breadcrumb-item>-->
          <!--          <a-breadcrumb-item>Bill</a-breadcrumb-item>-->
        </a-breadcrumb>
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"
        >
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { watch } from "vue";
import { useRouter } from "vue-router";
import { PieChartOutlined, UserOutlined } from "@ant-design/icons-vue";
import { UserControllerService } from "../../generated";
import { message } from "ant-design-vue";
const pathData = ref("嘻嘻");

const router = useRouter();

const selectedKeys = ref<string[]>(["1"]);
const openKeys = ref<string[]>(["sub1"]);
// 点击展开菜单
const titleClick = (e: Event) => {
  // message.info("titleClick" + JSON.stringify(e));
  console.log("handleClick" + JSON.stringify(e));
  // const path = JSON.parse(JSON.stringify(e));
  // router.push({
  //   path: path.key,
  // });
};
// 点击菜单
const handleClick = (e: Event) => {
  // message.info("handleClick" + JSON.stringify(e));
  const path = JSON.parse(JSON.stringify(e));
  pathData.value = path.key;
  router.push({
    path: path.key,
  });
};
// 监听
watch(
  () => openKeys,
  (val) => {
    console.log("openKeys", val);
  }
);
// 去登录
const goToLogin = () => {
  router.push({
    path: "/user/login",
  });
};

// 去个人页面
const goGetUser = () => {
  router.push({
    path: "/get/user",
  });
};

// 登陆用户信息
let userData = ref({});

//
onMounted(() => {
  getLoginUser();
});

// 登录用户
const getLoginUser = async () => {
  const res = await UserControllerService.getLoginUserUsingGet();
  // 查询成功，跳转到主页
  if (res.code === 0) {
    userData.value = res.data;
  }
};
</script>

<style>
.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
  font-size: large;
  color: lavender;
  font-weight: bold;
}

.avatar {
  position: absolute;
  top: 25px;
  right: 40px;
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
</style>
